<template>
  <div>
    <el-form :inline="true" :model="formBody" class="demo-form-inline">
      <!--      <el-form-item label="编号:">-->
      <!--        <el-input v-model="formBody.id" placeholder="输入菜单编号"></el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="名称:">-->
      <!--        <el-input v-model="formBody.name" placeholder="输入菜单名称"></el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="路径:">-->
      <!--        <el-input v-model="formBody.path" placeholder="输入路径"></el-input>-->
      <!--      </el-form-item>-->
      <div style="padding-left: 70%">
        <el-form-item>
          <el-button type="info" @click="getListByParams()" style="padding-left: 15px">查询</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="initInsertAndUpdate()" style="padding-left: 15px">新增</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table
      v-loading="loading"
      :data="menuTree"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="name"
        label="名称"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="id"
        label="编号"
        sortable
        width="250">
      </el-table-column>
      <el-table-column
        prop="path"
        label="路径">
      </el-table-column>

      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="initInsertAndUpdate(scope.row.id)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deleteCheck(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  弹窗 : 新增/修改  -->
    <el-dialog
      :title="!insertAndUpdateForm.id ? '新增' : '修改'"
      :visible.sync="insertAndUpdateVisible"
      width="40%"
    >
      <el-form ref="insertAndUpdateForm" :model="insertAndUpdateForm" label-width="40%">
        <el-form-item label="名称："  style="width: 70%">
          <el-input v-model="insertAndUpdateForm.name"></el-input>
        </el-form-item>
        <el-form-item label="类型：" style="width: 70%">
          <template>
            <el-select v-model="baseCommonKey" placeholder="请选择" @change="getListByMenuType()">
              <el-option
                v-for="item in allPermLeverList"
                :key="item.baseCommonKey"
                :label="item.baseCommonValue"
                :value="item.baseCommonKey">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="备注：" style="width: 70%">
          <el-input v-model="insertAndUpdateForm.description"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单：" v-show="getMenuListVisible" style="width: 70%">
          <template>
            <el-select v-model="insertAndUpdateForm.pid" placeholder="请选择" @change="getListByMenuType()">
              <el-option
                v-for="item in menuListByType"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="是否启用：" style="width: 70%">
          <el-switch
            v-model="insertAndUpdateForm.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item label="路径：" style="width: 70%">
          <el-input v-model="insertAndUpdateForm.path"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="insertAndUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="subInsertAndUpdate()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        loading: false,
        insertAndUpdateVisible: false,
        formBody: {
          id: '',
          name: '',
          path: ''
        },
        menuTree: [{
          id: '',
          name: '',
          path: '',
          children: []
        }],
        insertAndUpdateForm: {
          id: 0,
          name: '',
          type: '',
          code: '',
          description: '',
          pid: '',
          state: 1,
          path: ''
        },
        infoParams: {
          id: ''
        },
        allPermLeverList: [
          {
            baseCommonKey: "",
            baseCommonValue: ""
          }
        ],
        allPermLever: [
          {
            baseCommonKey: "",
            baseCommonValue: ""
          }
        ],
        baseCommonKey: '',
        getMenuListVisible: false,
        menuListByType: [
          {
            id: "",
            name: ""
          }
        ],
        pid: ""
      }
    },
    created() {
      this.init();
    },
    methods: {
      async init() {
        this.loading = true
        const {data: res} = await this.$http.get('/sysPermission/getMenuTree')
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.menuTree = res.menuTree
        this.loading = false
      },
      // 根据条件查询菜单
      async getListByParams() {
        const id = this.formBody.id
        const name = this.formBody.name
        const path = this.formBody.path
        const {data: res} = await this.$http.get('/sysPermission/getMenuTree', {
          params: {
            id: id,
            name: name,
            path: path
          }
        })
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        console.log(res)
        this.menuTree = res.menuTree
      },
      // 新增或修改弹窗初始化
      async initInsertAndUpdate(id) {
        this.insertAndUpdateVisible = true;
        this.insertAndUpdateForm = {}
        this.insertAndUpdateForm.state = 1

        const {data: res} = await this.$http.get('/sysBaseCommon/getAllPermLever')
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.allPermLeverList = res.allPermLever

        if (id) {
          const {data: res} = await this.$http.get('/sysPermission/info', {params: {id: id}})
          if (res.code !== 200) {
            return this.$message.error(res.msg)
          }
          this.insertAndUpdateForm = res.sysPermission
        }
      },
      // 新增或者修改提交
      async subInsertAndUpdate() {
        this.insertAndUpdateVisible = false;
        this.insertAndUpdateForm.type = this.baseCommonKey
        const {data: res} = await this.$http.post('/sysPermission' + (this.insertAndUpdateForm.id == null ? '/savePermission' : '/updatePermission'), this.insertAndUpdateForm)
        if (res.code != 200) {
          this.pid = ""
          this.init()
          return this.$message.error(res.msg)
        }
        this.pid = ""
        this.init()
        this.$message.success(res.msg)

      },
      // 删除
      deleteCheck(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteMenu(id)
        })
      },
      async deleteMenu(id) {
        const {data: res} = await this.$http.get("/sysPermission/deleteOne", {params: {id: id}})
        if (res.code != 200) {
          this.init()
          return this.$message.error(res.msg)
        }
        this.init()
        return this.$message.success(res.msg)

      },
      // 根据菜单类型获取列表
      async getListByMenuType() {
        if (this.baseCommonKey === 'permission_lever_01') {
          this.getMenuListVisible = false
          this.insertAndUpdateForm.pid = 0
        } else {
          this.getMenuListVisible = true
        }
        const key = this.baseCommonKey
        const {data: res} = await this.$http.get("/sysPermission/getListByMenuType", {params: {key: key}})
        if (res.code != 200) {
          return this.$message.error("获取上级菜单列表失败！")
        }
        this.menuListByType = res.menuList
        return this.$message.success(res.msg)
      }
    }
  }
</script>

<style scoped>

</style>
